﻿@page "/components/checkbox"

<DocsPage>
    <DocsPageHeader Title="Checkbox" SubTitle="Checkboxes is a great way to allow the user to make a selection of choices from things like a list.">
        <Description>
            If you want to let the user turn a setting on or off on demand, a Switch component is recommended instead.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Basic checkboxes</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <CheckboxBasicExample />
            </SectionContent>
            <SectionSource Code="CheckboxBasicExample" GitHubFolderName="Checkbox" ></SectionSource>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Checkbox with label</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <CheckboxLabelExample />
            </SectionContent>
            <SectionSource Code="CheckboxLabelExample" GitHubFolderName="Checkbox" ></SectionSource>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Indeterminate state</Title>
                <Description>When you use <CodeInline>T="bool?"</CodeInline> or bind the checkbox against a nullable bool it can have an indeterminate state when the value is <CodeInline>null</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <CheckboxIndeterminateExample />
            </SectionContent>
            <SectionSource Code="CheckboxIndeterminateExample" GitHubFolderName="Checkbox"></SectionSource>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Binding checkbox against different data types</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <CheckboxConversionExample />
            </SectionContent>
            <SectionSource Code="CheckboxConversionExample" GitHubFolderName="Switch" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>ReadOnly mode</Title>
                <Description>Set <CodeInline>ReadOnly="true"</CodeInline> will make the checkbox control stop listening to user inputs.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <CheckboxReadOnlyExample/>
            </SectionContent>
            <SectionSource Code="CheckboxReadOnlyExample" GitHubFolderName="Checkbox" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>